<template>
    <div class="home flex">
        <div class="content flex ">
            <div class="navbar-logo">
                <span>人工智能精准供热系统</span>
                <!-- 个人信息 -->
                <div style="position: absolute;top: 0px;right: 113px;font-size: 16px;height: 50px;line-height: 50px;color: #ffffff">
                    <!--<img :src="userInfo.username" style="display: inline-block;width: 32px;height: 32px"/>-->
                    <span>{{getUserInfo.realname}}</span>
                </div>
                <!-- 退出 -->
                <div class="el-icon-switch-button" style="position: absolute;top: 13px;right: 23px;font-size: 24px;color: #fff;cursor:pointer;" @click="$router.push({path: '/Home'})"></div>
            </div>
            <div class="container flex">
                <div class="container_list flex flexCen">
                    <router-link to="/supervision-cabin">
                        <div class="container_item flex" style="position: relative">
                            <div class="img">
                                <img src="@/assets/cabin.png" alt="" style="position: absolute;top: 0;width: 225px;height:225px">
                                <img src="@/assets/zuo.png" alt="" style="position: absolute;bottom: 0;width: 100%;height:151px">
                            </div>
                            <span>监管座舱</span>
                        </div>
                    </router-link>
                </div>
                <div class="container_list container_list1 flex flexBei">
                    <router-link to="/regulation-housekeeper">
                        <div class="container_item flex" style="position: relative">
                            <div class="img">
                                <img src="@/assets/housekeeper.png" alt="" style="position: absolute;top: 0;width: 225px;height:225px">
                                <img src="@/assets/zuo.png" alt="" style="position: absolute;bottom: 0;width: 100%;height:151px">
                            </div>
                            <span>调控管家</span>
                        </div>
                    </router-link>
                    <router-link to="/alert-center">
                        <div class="container_item flex" style="position: relative">
                            <div class="img">
                                <img src="@/assets/core.png" alt="" style="position: absolute;top: 0;width: 225px;height:225px">
                                <img src="@/assets/zuo.png" alt="" style="position: absolute;bottom: 0;width: 100%;height:151px">
                            </div>
                            <span>告警中心</span>
                        </div>
                    </router-link>
                </div>
                <div class="airship" >
                    <img src="@/assets/airship.png" alt="">
                </div>
            </div>
            <div class="bttom_area" style="cursor: pointer" @click="gongxinbu">
                ©2021 天津能源物联网科技股份有限公司 津ICP备 14003482号-3
            </div>
        </div>

    </div>
</template>

<script>

export default {
    name: 'navIndex',
    components: {
    },
    data() {
        return {
        }
    },
    mounted() {

    },
    computed:{
        getUserInfo(){
            return this.$store.state.userInfo
        }
    },
    watch(){
      /*'':{

        }*/
    },
    methods: {
        gongxinbu(){
            window.open('https://beian.miit.gov.cn/#/Integrated/index', '_blank');
        },
    }
};
</script>
<style lang="scss" scoped>
.home{
    height: 100%;
    width: 100%;
    background: url('../assets/nav_bg.png') ;
    background-size:100% 100%;

    .content{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: relative;
        align-items: center;

        .navbar-logo {
            width: 100%;
            height: 95px;
            line-height: 95px;
            font-size: 42px;
            text-align: center;
            background: url('../assets/common/top-bg.png') center/100% no-repeat;
            position: relative;

            span{
                letter-spacing: 5px;
                text-indent: 10px;
                font-weight: 800;
                background-image: -webkit-linear-gradient(bottom, #79a8f5, #f3f7ff);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                -moz-user-select: none;
                -khtml-user-select: none;
                user-select: none;
            }
        }
        .container{
            height: calc(100% - 95px);
            flex-direction: column;
            width: calc(100% - 224px);
            .container_list{
                margin-top: 50px;
                height: 300px;
                width: 100%;

                .container_item{
                    width: 264px;
                    flex-direction: column;
                    font-size: 28px;
                    font-weight: 400;
                    text-align: center;
                    color: #ffffff;


                    .img{
                        width: 100%;
                        height: 294px;
                        margin-bottom: 12px;
                        position: relative;
                        display: flex;
                        justify-content: center;

                        img:first-child{
                            margin-top: 15px;
                            -webkit-transition: margin 0.1s ease-out;
                            -moz-transition: margin 0.1s ease-out;
                            -o-transition: margin 0.1s ease-out;

                            &:hover{
                                    margin-top: 12px;
                                    width: 235px !important;
                                    height: 235px !important;
                                }
                        }

                    }
                }
            }
            .container_list1{
                margin-top: -60px;
            }
        }
        .airship{
            margin-top: -160px;
            height: 440px;
            width: 100%;
            img{
                width: 100%;
                height: 100%;
            }
        }


        .bttom_area{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 114px;
            line-height: 114px;
            font-size: 19px;
            color: #ffffff;
            font-weight: bolder;
        }
    }
}
</style>
